<template>
  <div class="movie-nav-box">
    <p class="first">西安<span class="drop"></span></p>
    <div class="nav-item" v-for="(v, i) in arr" :key="i">
      <router-link :to="v.path">
        <p>{{ v.name }}</p>
      </router-link>
    </div>
  
    <p @click="fun()"><img src="../../../public/images/search.png" alt="" /></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chooseIndex: 0,
      arr: [
        {
          name: "热映",
          path: "/home/movie",
        },
        {
          name: "影院",
          path: "/home/cinema",
        },
        {
          name: "待映",
          path: "/home/fhot",
        },
        {
          name: "经典电影",
          path: "/home/classic",
        },
      ],
    };
  },
  methods: {
    handelClick(index) {
      this.chooseIndex = index;
    },
    fun(){
     this.$router.push("/seek")
    }
  },
};
</script>

<style scoped>
.movie-nav-box {
  widows: 100%;
  height: 1rem;
  line-height: 1rem;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  font-size:.31rem;
  color: #666666;
}
/* .first {
  font-size: 0.3rem;
} */
.drop{
    display: inline-block;
    position: relative;
    top: .04rem;
    width: 0;
    height: 0;
    margin-left: .1rem;
    border: .1rem solid transparent;
    border-top-color: #b0b0b0;
}
.nav-item {
  position: relative;
}
img {
  width: 0.35rem;
  margin-top: .28rem;
}
a {
  color: black;
  font-weight: 600;
  color: #747774;

  /* font-size: 0.3rem; */
}

.router-link-active{
  font-size: .35rem;
  font-weight: 700;
  color: black;
}

.router-link-active::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0.4rem;
  height: 0.05rem;
  top: 0.94rem;
  left: 50%;
  transform: translateX(-50%);
  background: red;
}
</style>